<template>
  <div class="rootgw">
    <div class="sspp">
      <a class="fanhui" @click="$router.back()"> </a>
      <span class="splb">购物车</span>
      <span class="bianji">编辑</span>
      <span class="cdl"></span>
    </div>
    <div class="CarList" v-if="gwCars">
      <div v-for="(v, i) in gwCars" :key="i" :id="i">
        <div :ref="'tu' + i" class="gws">
          <div class="gwInfo">
            <input type="checkbox" :value="v.gid" v-model="checkbox" />
            <img :src="v.photo" alt="" />
          </div>
          <div class="gwtxt">
            <p>{{ v.subject }}</p>
            <p>
              ￥<span>{{ parseInt(v.sale_price) * parseInt(v.shuNum) }}</span>
            </p>
          </div>
          <div class="jishu">
            <span @click="deljs(i)">-</span><span>{{ v.shuNum }}</span
            ><span @click="addjs(i)">+</span>
          </div>
        </div>
        <div :ref="'del' + i" class="delList" @click="delLi(i, v.gid)">
          删除
        </div>
      </div>
    </div>
    <!-- <buttomtab :selectNav="4" class="budnav"></buttomtab> -->
    <div class="jiesuan" v-if="gwCars">
      <div>
        <input
          type="checkbox"
          @change="AllSet"
          :checked="gwCars.length == checkbox.length"
        />
      </div>
      <div>
        <span>合计：</span>
        <span>￥{{ alljg }}</span>
      </div>
      <div class="qjs">去结算</div>
    </div>
  </div>
</template>

<script>
import buttomtab from "../components/buttomtab.vue";
import EventUtil from "../unit/index";

export default {
  name: "gouwuche",
  data() {
    return {
      gwCars: null,
      checkbox: [],
    };
  },
  methods: {
    delLi(i, gid) {
      this.gwCars.splice(i, 1);
      let inx = this.checkbox.indexOf(gid);
      this.checkbox.splice(inx, 1);
      localStorage.setItem("goCarList", JSON.stringify(this.gwCars));
      for (let i = 0; i < this.gwCars.length; i++) {
        this.$refs["tu" + i][0].style.left = "0";
        this.$refs["del" + i][0].style.left = "7.5rem";
      }
    },
    addjs(i) {
      // v.sale_price,v.shuNum
      // console.log(i);
      this.gwCars[i].shuNum++;

      // console.log("+++");
    },
    deljs(i) {
      if (this.gwCars[i].shuNum * 1) {
        this.gwCars[i].shuNum--;
      }
      // console.log("---");
    },

    AllSet() {
      // console.log(this.checkbox.length, this.gwCars.length);
      if (!this.gwCars) {
        return;
      }
      if (this.checkbox.length < this.gwCars.length) {
        for (let index = 0; index < this.gwCars.length; index++) {
          this.checkbox.push(this.gwCars[index].gid);
          // console.log(this.checkbox);
        }
        return;
      }
      if (this.checkbox.length == this.gwCars.length) {
        this.checkbox = [];
      }
    },
  },
  components: {
    buttomtab,
  },
  created() {
    // let gwcar = await this.axios(
    //   `https://mall.api.epet.com/v3/cart/new/main.html?system=wap&isWeb=1&version=564&distinct_id=17c48ac8fdd6bd-07e78f10a5304-5437971-250125-17c48ac8fde4f3&debug_param=`
    // );
    // console.log(gwcar);
    // this.gwCars = gwcar;
    if (localStorage.getItem("goCarList")) {
      let goCarList = JSON.parse(localStorage.getItem("goCarList"));
      this.checkbox = [];
      for (let index = 0; index < goCarList.length; index++) {
        // goCarList[index].shuNum = '1';
        // this.$set(this.gwCars[index],'shuNum',1)
        this.checkbox.push(goCarList[index].gid);
      }
      this.gwCars = goCarList;
    }
  },
  computed: {
    alljg() {
      let arr = this.checkbox;
      let addh = 0;
      for (let index = 0; index < arr.length; index++) {
        for (let j = 0; j < this.gwCars.length; j++) {
          if (arr[index] == this.gwCars[j].gid) {
            addh +=
              parseInt(this.gwCars[j].sale_price) *
              parseInt(this.gwCars[j].shuNum);
          }
        }
      }
      return addh;
    },
  },
  mounted() {
    for (let i = 0; i < this.gwCars.length; i++) {
      // console.log(this.$refs["tu" + i][0]);
      EventUtil.listenTouchDirection(
        this.$refs["tu" + i][0],
        true,
        false,
        () => {
          // console.log("右滑");
          this.$refs["tu" + i][0].style.left = "0";
          this.$refs["del" + i][0].style.left = "7.5rem";
        },
        false,
        () => {
          // console.log("左滑");
          this.$refs["tu" + i][0].style.left = "-1.2rem";
          this.$refs["del" + i][0].style.left = "6.1rem";
        }
      );
    }
  },
  activated() {
    if (localStorage.getItem("goCarList")) {
      let goCarList = JSON.parse(localStorage.getItem("goCarList"));
      this.checkbox = [];
      for (let index = 0; index < goCarList.length; index++) {
        // goCarList[index].shuNum = '1';
        // this.$set(this.gwCars[index],'shuNum',1)
        this.checkbox.push(goCarList[index].gid);
      }
      this.gwCars = goCarList;
    }
  },
};
</script>

<style lang="less" scoped>
.rootgw {
  background-color: rgb(243, 244, 245);
}
.budnav {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
}
.jiesuan {
  box-sizing: border-box;

  font-size: 0.28rem;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  line-height: 1.2rem;
  // padding: 0.2rem;
  background-color: rgb(238, 238, 238);
  width: 100%;
  input {
    position: relative;
    top: 0.15rem;
    left: 0.08rem;
  }
  span {
    margin-left: 0.2rem;
  }
  .qjs {
    position: absolute;
    top: 0.3rem;
    left: 5rem;
    width: 1.8rem;
    height: 0.7rem;
    border-radius: 0.35rem;
    background-color: rgb(65, 200, 86);
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 0.7rem;
  }
}
.CarList {
  width: 98%;
  margin: 0 auto;
  > div {
    overflow: hidden;
    position: relative;
  }

  > div > div {
    display: flex;
    position: relative;
    transition: all 0.2s;
    left: 0;
    margin-top: 0.2rem;
    background-color: #fff;
    border: 0.02rem solid rgb(240, 236, 236);
  }
  .gwInfo {
    > img {
      margin-top: 0.2rem;
      width: 1.8rem;
      margin-left: 0.5rem;
    }
    > input {
      position: relative;
      top: -0.7rem;
      left: 0.5rem;
    }
  }
  .gwtxt {
    font-size: 0.3rem;
    width: 4.1rem;
    // background-color: rgb(255, 192, 192);
    padding-left: 0.2rem;
    > p:nth-child(1) {
      font-size: 0.26rem;
    }
    > p:nth-child(2) {
      color: red;
    }
  }
  .delList {
    position: absolute;
    display: inline-block;
    font-size: 0.3rem;
    height: 2.26rem;
    width: 1.2rem;
    line-height: 2.26rem;
    text-align: center;
    top: 0;
    left: 7.5rem;
    transition: all 0.2s;

    background-color: rgb(255, 147, 147);
  }
}
.jishu {
  box-sizing: border-box;
  position: absolute;
  right: 0.5rem;
  font-size: 0.3rem;
  top: 1.5rem;
  border: 0.02rem solid rgb(245, 241, 241);
  border-radius: 0.35rem;
  overflow: hidden;
  > span {
    box-sizing: border-box;

    display: inline-block;
    text-align: center;
    width: 0.6rem;
    line-height: 0.4rem;
    border: 0.02rem solid rgb(204, 204, 204);

    // background-color: rgb(248, 248, 248);
  }
}
input {
  display: inline-block;
  -webkit-appearance: none; //清楚复选框的默认样式
  width: 0.4rem;
  height: 0.4rem;
  border: 0.02rem solid rgb(134, 134, 134);
  border-radius: 50%;
}
input[type="checkbox"]:checked {
  background: url(https://static.epetbar.com/mini_images/emall/check.png) 0 0
    no-repeat;
  background-size: contain;
  border: 0;
}
.sspp {
  background-color: #fff;
  font-size: 0.2rem;
  text-align: center;
  > .splb {
    display: inline-block;
    width: 2rem;
    line-height: 1rem;
    margin: 0 auto;
    font-size: 0.34rem;
  }
}
.fanhui {
  margin: 0;
  position: absolute;
  left: 0.1rem;
  width: 0.7rem;
  height: 0.7rem;
  top: 0.14rem;
  background: url(https://static.epetbar.com/static_web/wap/dist/images/background/topIco.png)
    0 0 no-repeat;
  background-size: 0.7rem auto;
  background-position: 0 0;
}
.bianji {
  position: absolute;
  display: block;
  top: 0.3rem;
  right: 0.8rem;
  font-size: 0.3rem;
}
.cdl {
  margin: 0;
  top: 0.14rem;
  right: 0.1rem;
  width: 0.7rem;
  height: 0.7rem;
  background: url(https://static.epetbar.com/static_web/wap/dist/images/background/topIco.png)
    0 0 no-repeat;
  background-size: 0.7rem auto;
  position: absolute;
  background-position: 0 -1.4rem;
}
</style>